<template>
	<div class="login-container">
<van-nav-bar class="page-nav-bar" title="登录">
  <template #left>
    <!-- 后退上一页:  $router.back() 或 $router.go(-1) -->
    <van-icon name="cross" @click="$router.back()" />
  </template>
</van-nav-bar>

		<!-- <van-nav-bar class="page-nav-bar" title="登录" /> -->
		<!-- form表单 -->
		<van-form @submit="onSubmit" ref="loginForm">
			<van-field
				name="mobile"
				v-model="user.mobile"
				placeholder="请填写手机号"
				type="number"
				maxlength="11"
				:rules="userFormRules.mobile"
			>
				<template #left-icon>
					<i class="toutiao toutiao-shouji"></i>
				</template>
			</van-field>
			<van-field
				name="code"
				v-model="user.code"
				placeholder="请输入验证码"
				type="number"
				maxlength="6"
				:rules="userFormRules.code"
			>
				<template #left-icon>
					<i class="toutiao toutiao-yanzhengma"></i>
				</template>
				<!-- 发送按钮 -->
				<template #button>
					<!-- 倒计时 -->
					<van-count-down
						:time="1000 * 5"
						format="ss s"
						v-if="isCountDownShow"
						@finish="isCountDownShow = false"
					/>
					<!--这里注意，要加上native-type,否则也可以实现表单提交-->
					<van-button
						class="send-sms-btn"
						round
						size="small"
						native-type="button"
						type="default"
						@click="onSendSms"
						v-else
					>
						发送验证码
					</van-button>
				</template>
			</van-field>

			<div class="login-btn-wrap">
				<van-button
					class="login-btn"
					block
					type="info"
					native-type="submit"
					>登录</van-button
				>
			</div>
		</van-form>
	</div>
</template>

<script>
import { login, sendSms } from '@/api/user'
export default {
	name: 'LoginIndex',
	data() {
		return {
			user: {
				mobile: '',
				code: '',
			},
			// 定义验证规则对象
			userFormRules: {
				mobile: [
					{
						required: true,
						message: '请填写用户名',
					},
					{
						pattern: /^1[3|5|7|8]\d{9}$/,
						message: '手机格式错误',
					},
				],
				code: [
					{
						required: true,
						message: '请填写验证码',
					},
					{
						pattern: /^\d{6}$/,
						message: '验证码输入错误',
					},
				],
			},
			isCountDownShow: false,
		}
	},
	methods: {
		async onSubmit() {
			// 获取表单数据
			// const user = this.user
			// 轻提示
			this.$toast.loading({
				message: '加载中...',
				forbidClick: true,
				duration: 0,
			})
			// login返回一个promise对象
			try {
			const { data }	=	await login(this.user)
        this.$store.commit('setUser',data.data)
				// console.log(login(user));
				// console.log('登录成功', res)
				this.$toast.success('登录成功')
        // this.$router.back()
        let url=this.$route.query.url
        this.$router.replace(url||'/my')
			} catch (err) {
        // console.log('44444444');
        // console.log(err);
				if (err.response.status === 400) {
					this.$toast.fail('手机号或验证码错误')
				} else {
					console.log('登录失败,请稍后重试', err)
					this.$toast.fail('登录失败,请稍后重试')
				}
			}
		},
		async onSendSms() {
			//  绑定点击事件
			// 校验手机号，校验手机号通过，显示倒计时；验证单个表单项，validate返回一个promise对象
			try {
				await this.$refs.loginForm.validate('mobile')
			} catch (err) {
				return console.log('验证失败', err)
			}
			// console.log('onSendSms成功');

			// 2、验证通过显示倒计时;vant-CountDown组件，倒计时结束，触发@finish事件，改变是否显示的状态
			this.isCountDownShow = true
			// 发送验证码
			try {
			await sendSms(this.user.mobile)
				this.$toast('发送成功')
			} catch (err) {
				this.isCountDownShow = false
				if (err.response.status === 429) {
					this.$toast('发送太频繁，请重试')
				} else {
					this.$toast('发送失败，请重试')
				}
			}
		},
	},
}
</script>

<style scoped lang="less">
.login-container {
	.toutiao {
		font-size: 37px;
	}
	.send-sms-btn {
		width: 180px;
		height: 60px;
		line-height: 60px;
		background-color: #ededed;
		font-size: 22px;
		color: #666;
	}
	.login-btn-wrap {
		padding: 53px 33px;
		.login-btn {
			background-color: #6db4fb;
			border: none;
		}
	}
}
</style>
